import { useState } from "react";
import { Text, View, Image } from "@tarojs/components";
import Tabs from "../../components/Tabs";
import InfiniteLoading from "../../components/InfiniteLoading";
import InfiniteLoadingFoot from "../../components/InfiniteLoadingFoot";
import usePage from "../../packageB/pages/video-list/hooks/usePage.js";
import { pageMiniInfo } from "../../api/zixun.js";
import Taro from "@tarojs/taro";
import { baseUrl } from "../../utils/request.js";
import { navigateTo } from "../../common/_.js";
import "./index.scss";

const TABS = [
  { value: "2", title: "个人预约" },
  { value: "1", title: "团队预约" },
];
const ruleType = {
  1: "团队预约",
  3: "团队预约",
  2: "个人预约",
};
const auditState = {
  1: "待核验",
  2: "已核验",
  3: "已取消",
};
const idType = {
  1: "身份证",
  2: "护照",
  3: "港澳通行证",
  4: "台胞证",
};

export default function Record() {
  const [params, setParams] = useState({ ruleType: "2" });
  const { listData, refreshing, empty, loadMore, onPull, onLoad } = usePage({
    request: pageMiniInfo,
    params,
  });

  const navigateToDetails = (id) => {
    navigateTo("/pages/zixun-detail/index",{id})
  };

  return (
    <View className={"reservation-record-page"}>
      {/* <Tabs
        tabs={TABS}
        value={params.ruleType}
        onClick={(tab) => setParams({ ruleType: tab.value })}
      /> */}
      <View className={"list-wrapper"}>
        <InfiniteLoading
          empty={empty}
          onLoad={onLoad}
          onRefresh={onPull}
          refreshing={refreshing}
        >
          {listData?.map((item,index) => (
            <View
              key={index}
              className={"list-item"}
              onClick={() => navigateToDetails(item.id)}
            >
              <View className="tie" style={{borderRadius:'24px'}}>
                <Image className="itemImg" src={baseUrl+item.infoFileUrl}/>
              </View>
              <View className="tie" style={{paddingLeft: 24+'px',width:"100%" }}>
                <View className="iteWrap"  style={{flex:1}}>
                  <Text className="tit" numberOfLines={2}>{item.infoName}</Text>
                </View>
                <View className="iteWrap" style={{display:"flex",flexDirection: 'row',width:"100%"}}>
                  <Text className="ites" style={{flex:1}}> {item.infoOrigin}</Text>
                  <Text className="ites">{item.publishDate.substring(0,11)}</Text>
                </View>
              </View>
            </View>
          ))}
          {listData?.length > 0 && <InfiniteLoadingFoot state={loadMore} />}
        </InfiniteLoading>
      </View>
    </View>
  );
}
